<template>
  <ElContainer>
    <!-- 头部 -->
    <ElHeader height="80px"></ElHeader>

    <ElContainer>
      <!-- 左侧 -->
      <ElAside>
        <ElScrollbar max-height="400px">
          <ElCard
            v-for="(item, index) in config"
            :key="index"
            :draggable="true"
            @dragover.prevent
            @dragstart="dragStart(item)"
            @dragend="dragEnd"
          >
            <template #header>
              {{ item.name }}
            </template>
            <component :is="components[item.name]"></component>
          </ElCard>
        </ElScrollbar>
      </ElAside>
      <!-- 中间 -->
      <ElMain>
        <div v-for="item in currentDesigner.components">
          <component
            :is="components[item.name]"
          ></component>
        </div>
      </ElMain>
      <!-- 右侧 -->
      <ElAside></ElAside>
    </ElContainer>
  </ElContainer>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from "vue";
import { VisualDesigner } from "../types/package";
import components from "../components-vue";
import config from "../component-config.json";
import designer from "../designer.json";

// const componentData = reactive<any[]>([]);
const currentDesigner = reactive<VisualDesigner>(designer);
const currentComponent = ref<any>();
const Id = ref(0);
for (let item of currentDesigner.components) {
  Id.value = Id.value < item.id ? item.id : Id.value;
  // componentData.push(undefined);
}

const currentId = computed(() => ++Id.value);

const dragStart = (item) => (currentComponent.value = item.name);
const dragEnd = () => {
  currentDesigner.components.push({
    id: currentId.value,
    name: currentComponent.value as string,
    config: {},
    style: {},
  });
  console.log(currentDesigner)
};
</script>

<style scoped></style>
